<template>
	<view>
		<view class="seller-top">
			<view class="topimg">
				<image :src="imgurl+'/WeChat/top-bj.png'" mode=""></image>
				<view class="userimg">
					<image :src="imgurl+(userinfo.avatar?userinfo.avatar:'/WeChat/user.png')" mode=""></image>
				</view>
			</view>

			<view class="current_ranking">
				{{usernum?'目前排名'+usernum:'未进入排名'}}
			</view>
		</view>
		<view class="select flex-between">
			<view @click="saveTopType(1)" :class="'tagbtn' + (topType==1?' tagbtnon':'')">
				今日积分排行
			</view>
			<view @click="saveTopType(2)" :class="'tagbtn' + (topType==2?' tagbtnon':'')">
				总积分排行
			</view>
		</view>

		<view class="seller-list">
			<view class="seller-item flex-y-center" v-for="(item,index) in toplist" :key="item.id">
				<view class="sellerimg">
					<image v-if="index<3" :src="imgurl+'/WeChat/rank'+(index+1)+'.png'" mode=""></image>
					{{index>2?(index+1):''}}
				</view>
				<view class=" username flex-grow-1">{{item.username}}</view>
				<view class="sum">
					{{(topType==1?'今日积分':'总积分')}}:<text>{{item.score}}</text>分
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgurl: this.serverURL,
				isauthorized: (uni.getStorageSync('token') ? true : false),
				userinfo: {
					id: 0,
					username: '-',
					avatar: '',
					level: '',
					score: '',
					nowDayNum: 0,
					nowDayRice: '0',
					Company: 'm'
				},
				topType:1 ,//1 今日积分  2 总积分
				toplist:[],
				usernum:''
			};
		},
		onReady() {
			this.isauthorized = (uni.getStorageSync('token') ? true : false)
			if (uni.getStorageSync('token')) {
				this.userinfo = uni.getStorageSync('token');
			}
			this.getUserTop()
		},
		methods: {
			saveTopType(num){
				let that = this;
				that.topType = num;
				that.getUserTop()
			},
			getUserTop(){
				let that = this;
				uni.request({
					url: that.serverURL + "/index/Draw/getUserTop",
					method: "POST",
					data: {
						id: that.userinfo['id'],
						topType: that.topType
					},
					success(res) {
						that.toplist = res.data.toplist
						that.usernum = res.data.usernum
					},
					fail(fail) {
						uni.hideLoading();
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.seller-top {
		.topimg {
			height: 276rpx;
			width: 100%;
			position: relative;

			.userimg {
				position: absolute;
				bottom: -82rpx;
				left: 50%;
				transform: translate(-50%, 0);
				width: 266rpx;
				height: 266rpx;
				border-radius: 44rpx;
				border: 2rpx solid #fff;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}

			}
		}

		.current_ranking {
			margin: 119rpx auto 0px auto;
			width: 274rpx;
			height: 49rpx;
			text-align: center;
			line-height: 49rpx;
			color: #fff;
			background: #00412d;
			border-radius: 49rpx;
		}
	}

	.select {
		width: 670rpx;
		margin: 0px auto;
		padding: 41rpx 20rpx;

		.tagbtn {
			font-size: 39rpx;
			font-weight: bold;
			color: #c8c9ca;
		}

		.tagbtnon {
			color: #333;
		}
	}

	.seller-list {
		width: 670rpx;
		margin: 0px auto;
		background: #eff3f8;
		padding: 20rpx;
		box-sizing: border-box;

	}

	.seller-item {
		padding: 12rpx 0px;
	}

	.sellerimg {
		width: 52rpx;
		height: 62rpx;
		margin-right: 58rpx;
		justify-content: center;
		display: flex;
		align-items: center;
		font-size: 40rpx;
		font-weight: bold;
		image {
			width: 100%;
			height: 100%;
		}
	}

	.sum {
		text {
			font-size: 46rpx;
			font-weight: bold;
			margin: 0px 10rpx;
		}
	}
	.username{
		font-size: 32rpx;
		font-weight: bold;
	}
</style>
